<template>
  <div class="body">
    <div class="main">
      <Header :navList="navList" />
      <div class="content">
        <div class="list-content">
          <div style="margin: 35px 0;font-size: 36px;text-align: center">院首长信箱</div>
          <div style="text-align: right;cursor: pointer;font-size: 14px;color: #237CBE" @click="handleAdd">我要留言</div>

          <el-divider></el-divider>
          <div style="padding-top: 8px">

            <div v-if="detailList.length > 0">
              <div class="list-news" v-for="item in detailList" :key="item.id">
                <div style="display: flex;justify-content: space-between;margin-bottom: 12px">
                  <div style="display: flex;align-items: center;">
                    <div class="list-mark"></div>
                    <div class="list-title">{{ item.name }}</div>
                  </div>
                  <div style="width: 160px;margin-left: 50px;font-size: 14px;color: #303133">
                    {{ dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss') }}
                  </div>
                </div>
                <div>
                <div style="color: #606266;font-size: 14px">{{ item.content }}</div>
                  <div style="margin-top: 24px" v-if="item.reply">
                    <div style="display: flex;justify-content: space-between;margin-bottom: 12px">
                    <div class="list-title">领导回复：</div>
                      <div style="width: 160px;margin-left: 50px;font-size: 14px;color: #303133">{{ dayjs(item.reply.replyDate).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    </div>
                    <div style="color: #606266;font-size: 14px">{{ item.reply.replyContent }}</div>
                  </div>
                  <div style="margin-top: 24px" class="list-title" v-else>暂未回复</div>
                </div>
                <el-divider></el-divider>
              </div>

            </div>
            <div v-else style="font-size: 14px;text-align: center;margin-top: 40px">暂无数据</div>
          </div>
          <div style="margin-top: 12px;text-align: center">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[15, 30, 45]"
                :page-size="100"
                v-show="total > 0"
                layout="total, prev, pager, next, sizes"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <Footer />
    </div>

  </div>

</template>

<script>
import { getList, getMailboxListApi } from "@/api/home";
import Header from "@/templates/Layout/MoreHeader.vue";
import Footer from "@/templates/Layout/Footer.vue";
import { getBubbleSort } from "@/util/util";
import dayjs from "dayjs";

export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      active: 0,
      total: 0,
      title: '',
      activeNames: ['1'],
      childTitle: '',
      paused: false,
      notice: [],
      news: [],
      fileList: [],
      options: [],
      show: true,
      moduleName: '',
      createDate: '',
      content: '',
      form: {
        value: ''
      },
      detailList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      },
      list: [],
      imgList: [],
      showImg: false,
      navList: [],
      dateList: [],
      date: dayjs().year()
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    dayjs,
    async getList() {
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
      const mail = await getMailboxListApi({  ...this.page })
      this.detailList = mail.records
      this.total = Number(mail.total)
      // console.log(mail)

      this.show = false
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      return nav[0].children.sort(getBubbleSort('order', 1))
    },

    handleNews(row) {

      if (row.id) {
        const { href } = this.$router.resolve({
          path: `/mailbox-content`,
          query: {
            id: row.id,
          }
        });
        window.open(href, '_blank');
      }
    },
    handleAdd(){
      const { href } = this.$router.resolve({
        path: `/mailbox-add`
      });
      window.open(href, '_blank');
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getList()
    },
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}

.a {
  background: #ECF1F7;
}


.list {
  height: 48px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  background: #EBEEF5;
}

.list:not(:last-child) {
  border-bottom: 1px solid #F2F6FC;
}

.list:hover {
  background: #60A3D7;
  color: #fff;
}

.list-news {
  font-size: 15px;
  color: #444;
  margin-bottom: 12px;
  //line-height: 40px;
  //display: flex;
  //align-items: center;
  //justify-content: space-between;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #60A3D7;
  margin-right: 10px;
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133
}

.is {
  background: #60A3D7;
  color: #fff;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #60A3D7
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #60A3D7;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0 !important;
}

</style>
